<template>
  <div class="plan">
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单计划</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-row>
      <el-col :span="4">
        <el-date-picker v-model="selectDateRange" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
      </el-col>
  
      <el-col :offset="12" :span="8">
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="未开始"></el-checkbox>
          <el-checkbox label="生产中"></el-checkbox>
          <el-checkbox label="已完成"></el-checkbox>
          <el-checkbox label="异常"></el-checkbox>
        </el-checkbox-group>
      </el-col>
  
    </el-row>
    <el-row>
      <el-col :span="24">
        <PlanTable :myTableData="tableData"></PlanTable>
      </el-col>
    </el-row>
  
    <el-row>
      <el-col :span="12">
        <chart :options="lineData" theme="walden"></chart>
      </el-col>
      <el-col :span="12">
        <chart :options="barData" theme="walden"></chart>
      </el-col>
    </el-row>
  
  
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-row {
    margin: 20px;
  }
  
  
  /*  .el-table table,
    .el-table td {
      border: 0;
    } */
  
  
  /*  .el-table {
      background: #2c343c;
      margin-bottom: 20px;
    } */
  
  
  /* 
    .el-table tr {
      background: #2c343c;
      color: #ffffff;
    }
    
    .el-table thead.is-group th {
      background: #2c343c;
    }
    
    .el-table .primary-row {
      background: #409EFF;
    }
    
    .el-table .warning-row {
      background: #EB9E05;
    }
    
    .el-table .success-row {
      background: #f0f9eb;
    }
    
    .el-table .danger-row {
      background: #FA5555;
    } */
</style>

<script>
  import PlanTable from '@/components/plan/PlanTable'
  import ECharts from 'vue-echarts/components/ECharts.vue'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/component/polar'
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/tooltip'
  import theme from '@/assets/walden.json'
  ECharts.registerTheme('walden', theme)
  
  import lineData from './data/linedata'
  import barData from './data/bardata'
  
  export default {
    components: {
      PlanTable
    },
  
    methods: {
      tableRowClassName({
        row,
        rowIndex
      }) {
        // if (row.zt == '1') {
        //   return 'warning-row'; //等待
        // } else if (row.zt == '0') {
        //   return 'success-row'; //生产
        // } else if (row.zt == '2') {
        //   return 'primary-row'; //完成
        // } else if (row.zt == '-1') {
        //   return 'danger-row'; //错误
        // }
        return '';
      }
    },
    data() {
      return {
        barData: barData,
        lineData: lineData,
  
        checkList: ['等待中', '已完成'],

        selectDateRange: [
          "2017-10-31T16:00:00.000Z",
          "2017-12-07T16:00:00.000Z"
        ],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        tableData: [{
            pp: 'NIKE',
            dd: '6623nd0',
            scph: '1341-1711010033',
            pm: 'N7#AA注塑开口',
            sl: 556,
            location: 'J1-B1-F2-W1',
            cxh: 'L01',
            bz: 'A',
            zt: '0',
            jcj: 'II01',
            lpl: 98.7,
            qxs: 90,
            ycqx: 2
          },
          {
            pp: 'ANTA',
            dd: '6623nd0',
            scph: '1341-1711010033',
            pm: 'N7#AA注塑开口',
            sl: 556,
            location: 'J1-B1-F2-W1',
            cxh: 'L01',
            bz: 'A',
            zt: '1',
            jcj: 'II01',
            lpl: 98.7,
            qxs: 90,
            ycqx: 2
          },
          {
            pp: 'ANTA',
            dd: '6623nd0',
            scph: '1341-1711010033',
            pm: 'N7#AA注塑开口',
            sl: 556,
            location: 'J1-B1-F2-W1',
            cxh: 'L01',
            bz: 'A',
            zt: '2',
            jcj: 'II01',
            lpl: 98.7,
            qxs: 90,
            ycqx: 2
          },
          {
            pp: 'ANTA',
            dd: '6623nd0',
            scph: '1341-1711010033',
            pm: 'N7#AA注塑开口',
            sl: 556,
            location: 'J1-B1-F2-W1',
            cxh: 'L01',
            bz: 'A',
            zt: '3',
            jcj: 'II01',
            lpl: 98.7,
            qxs: 90,
            ycqx: 2
          }
  
  
        ]
      }
    }
  }
</script>


